<template>
	<view :class="mask?'showMask':''">
		<view>
			<view class="nav"></view>
			<view class="top">
			    <view class="user" @click="goAuth" v-if="!user_token">
			      <view class="bigText">
			        <img class='avatar' :src="profile.avatar" alt="">
			      </view>
			      <view class="avatatText iconfont icon-write">点击头像可登录</view>
			    </view>
			    <view class="info" v-else @click="goAvatar">
					<view class="pan">
						<image class="pic" :src="profile.avatar" mode=""></image>
						<view class="name">
							<text class="fs_15 font-weight-semibold text-white d-block">{{ profile.nickname }}</text>
							<text class="fs_15 text-white d-block phone">{{ profile.mobile }}</text>
						</view>
					</view>
					<view class="icon iconfont icon-right"></view>
			    </view>
			  </view>
			  
			  <!-- <view class="grid">
			    <grid-item v-for="item in gridList" :key="item.id" :className="item.class" :title="item.title"></grid-item>
			  </view> -->
			  <!-- <view class="assistant">
			    <view class="title">
			      <view>求职助手</view>
			      <text>更多<text class="iconfont icon-right"></text></text>
			    </view>
			    <view class="items">
			      <view class="item">
			        <view class="left">
			          <view class="bigText">
			            简历刷新
			          </view>
			          <view class="smallText">
			            提升简历活跃
			          </view>
			        </view>
			        <view class="right">
			          <view class="iconfont icon-jlsx"></view>
			        </view>
			      </view>
			      <view class="item">
			        <view class="left">
			          <view class="bigText">
			            职业测评
			          </view>
			          <view class="smallText">
			            帮助职业定位
			          </view>
			        </view>
			        <view class="right bgCD95FE">
			          <view class="iconfont icon-zycp"></view>
			        </view>
			      </view>
			    </view>
			  </view> -->
			  <view class="list">
			    <view 
					class="item" 
					hover-class="active" 
					v-for="item in listOne" 
					:key='item.icon'
					@click="listItemClick(item.path)"
				>
			      <view class="item-inner">
			        <view :class="item.icon">
			          <text>{{item.title}}</text>
			        </view>
			        <text class="iconfont icon-right"></text>
			      </view>
			    </view>
				<view class="item" @click="openTips">
				  <view class="item-inner">
				    <view class="iconfont icon-yijian">
				      <text>客服</text>
				    </view>
				    <text class="iconfont icon-right"></text>
				  </view>
				</view>
			    <view class="line"></view>
			  </view>
			  <view class="text-center" v-if="user_token">
			  	<view class="connect" type="primary" size="mini" @click="logOut()">退出登录</view>
			  </view>
			</view>
			<view class="mask" @click="maskClick" v-if="mask">
			  <view class="inner" @click.stop="nullFn">
			    <view class="title">登录或注册</view>
			    <view class="login" @click="login">微信账号快速登录</view>
			    <view class="tip">
			      登录代表您已同意海雄直聘<text>《用户协议》</text>和<text>《隐私政策》</text>
			    </view>
			  </view>
			</view>
			<uni-popup ref="tips" type="center">
				<view class='ductionContent'>
					<view class="content">
						<view class='title'>联系客服</view>
						<view class='tipsContent'>
							<view class='wrap'>
								<view class="info">
									<image class='img' src='/static/kefu.png'></image>
									<view class="name" >季经理：15547965522</view>
								</view>
								<button class="btn"  type='primary' @click="goPhone('15547965522')">拨打</button>
							</view>
						</view>
						<view class='pointBtn' @click="closeips">关闭</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import gridItem from '../../components/gridItem.vue';
	import {mapState, mapMutations} from 'vuex';
	// let App = getApp();
	export default {
		data() {
			return {
				user_token:uni.getStorageSync('user_token'),
				inviteCode:'', // 邀请码
				profileBg: require("@/packageMy/static/my/my_navbar_profile.png"),
				telImg: require("@/packageMy/static/my/phone.png"),
				balanceIcon: require("@/packageMy/static/my/balance_icon.png"),
				profile:{
					avatar: require("@/static/profile.jpg"),
					is_auth:"1", // 是否实名认证:1=否,2=是
					nickname:"",
					mobile:"",
					balance:"0.00"
				},
				myEnroll:[
					{
						img:require("@/packageMy/static/my/myEnrollImg1.png"),
						name:"全部",
						type:"3"
					},
					{
						img:require("@/packageMy/static/my/myEnrollImg2.png"),
						name:"已报名",
						type:"0"
					},
					{
						img:require("@/packageMy/static/my/myEnrollImg3.png"),
						name:"进行中",
						type:"1"
					},
					{
						img:require("@/packageMy/static/my/myEnrollImg4.png"),
						name:"已完成",
						type:"2"
					},
				],
				functions:{
					img1: require("@/packageMy/static/my/fun_icon1.png"),
					img2: require("@/packageMy/static/my/fun_icon2.png"),
					img3: require("@/packageMy/static/my/fun_icon3.png"),
					img4: require("@/packageMy/static/my/fun_icon4.png"),
					img5: require("@/packageMy/static/my/fun_icon5.png"),
					img6: require("@/packageMy/static/my/fun_icon6.png"),
				},
				// isWeChat:App.globalData.isWeChat,
				service_mobile:"",
				
				gridList: [{
				    id: 1,
				    class: 'iconfont icon-resume',
				    title: '在线简历'
				  },
				  {
				    id: 2,
				    class: 'iconfont icon-upLoad',
				    title: '附件简历'
				  },
				  {
				    id: 3,
				    class: 'iconfont icon-wdms',
				    title: '我的面试'
				  },
				  {
				    id: 4,
				    class: 'iconfont icon-jobSub',
				    title: '职位订阅'
				  }
				],
				listOne: [{
				    title: "我的收藏",
				    icon: 'iconfont icon-shoucang',
				    path: '/packageMy/pages/my/collection/collection'
				  },
				  {
				    title: "个人信息",
				    icon: 'iconfont icon-send',
					path: '/packageMy/pages/my/profile/profile'
				  },
				  // {
				  //   title: "个人简历",
				  //   icon: 'iconfont icon-resume',
				  // 	path: '/packageMy/pages/my/resume/resume'
				  // },
				  {
				    title: "我的应聘",
				    icon: 'iconfont icon-jobSub',
				  	path: '/packageMy/pages/my/applyJob/applyJob'
				  },
				  {
				    title: "我的报名",
				    icon: 'iconfont icon-zycp',
				  	path: '/pages/enrolled/enrolled'
				  },
				  // {
					 //  title: "客服",
					 //  icon: 'iconfont icon-yijian'
				  // },
				],
				
				mask: false
			}
		},
		onLoad(options){
			const token = uni.getStorageSync('user_token');
			console.log('myToken', token)
			if(token){
				this.getUserCenter();
			} else {
				this.getLogin();
			}
		},
		computed: {
			...mapState(['accessToken'])
		},
		components:{
			gridItem
		},
		methods: {
			...mapMutations(['removeStoreAccessToken']),
			// 跳转授权页面
			goAuth(){
				uni.navigateTo({
					// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
					url: "/pages/auth/auth"
				})
			},
			getLogin() {
				let that = this;
				wx.login({
					success: res => {
						this.code = res.code;
						if(this.code) {
							let params = {code: this.code}
							this.$api.get_ready_auth(params).then(res => {
								if(res.code === 200) {
									uni.removeStorageSync('user_token');
									uni.setStorageSync('user_token',res.data.accessToken);
								}
							})
						} else {
							uni.showModal({
								title: '温馨提示',
								content: '请先授权登录',
								confirmText: '同意',
								cancelText: '关闭',
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
											url: "/pages/auth/auth"
										})
									} else if (res.cancel) {
										console.log('关闭');
									}
								}
							});
						}
					}
				})
			},
			// 复制
			getCopy(value){
				uni.setClipboardData({
					data: value,
					success: function () {
						// 调用方法成功
						uni.showToast({
							title: '邀请码已复制',
							icon: 'success'
						});
					}
				})
			},
			// 获取用户中心
			getUserCenter() {
				this.$api.profileUserCenter().then(res => {
					console.log('UserCenter', res)
					if(res.code === 200) {
						this.profile.avatar = res.data.avatarUrl || require("@/static/profile.jpg"),
						this.profile.is_auth = "1", // 是否实名认证:1=否,2=是
						this.profile.nickname = res.data.name;
						this.profile.mobile = res.data.phone;
					}
				})
			},
			// 获取联系客服
			initMobile(){
				this.$api.aboutUs({
					name: 'service_mobile',
				}).then(res=>{
					if(res.code == 0){
						this.service_mobile = res.data.value
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
				
			// 跳转我的报名
			goEnrolled(index){
				uni.setStorageSync('enrolled_activeTab',index);
				uni.reLaunch({
					url: "/pages/enrolled/enrolled",
				})
			},
			
			// 跳转个人信息
			goProfile(){
				if(this.user_token){
					uni.navigateTo({
						// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
						url: "/packageMy/pages/my/profile/profile",
					})
				}else{
					uni.showModal({
						title: '温馨提示',
						content: '请先授权登录',
						confirmText: '同意',
						cancelText: '关闭',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
									url: "/pages/auth/auth"
								})
							} else if (res.cancel) {
								console.log('关闭');
							}
						}
					});
				}
			},
			
			// 跳转我的收藏
			goCollection(){
				if(this.user_token){
					uni.navigateTo({
						// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
						url: "/packageMy/pages/my/collection/collection",
					})
				}else{
					uni.showModal({
						title: '温馨提示',
						content: '请先授权登录',
						confirmText: '同意',
						cancelText: '关闭',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
									url: "/pages/auth/auth"
								})
							} else if (res.cancel) {
								console.log('关闭');
							}
						}
					});
				}
			},
			// 跳转
			listItemClick(path) {
			  if (!this.user_token) {
				  uni.showModal({
				  	title: '温馨提示',
				  	content: '请先授权登录',
				  	confirmText: '同意',
				  	cancelText: '关闭',
				  	success: function (res) {
				  		if (res.confirm) {
				  			uni.navigateTo({
				  				// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
				  				url: "/pages/auth/auth"
				  			})
				  		} else if (res.cancel) {
				  			console.log('关闭');
				  		}
				  	}
				  });
				  return
			  } 
			  uni.navigateTo({
			    url: path
			  })
			},
			
			// 联系客服
			goMobile(){
				uni.makePhoneCall({
					// 手机号
					phoneNumber: this.service_mobile, 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			
			// 退出登录
			logOut(){
				uni.showModal({
					title: '温馨提示',
					content: '请确认是否退出',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('user_token');
							uni.removeStorageSync('user_info');
							uni.removeStorageSync('beforePageFullPath');
							uni.removeStorageSync('enrolled_activeTab');
							uni.removeStorageSync('job_activeTab');
							this.user_token = '';
							this.removeStoreAccessToken();
							this.profile = {
								avatar: require("@/static/profile.jpg"),
								is_auth:"1", // 是否实名认证:1=否,2=是
								nickname:"",
								mobile:"",
								balance:"0.00"
							};
							this.inviteCode = undefined;
							
							// #ifdef H5
							window.location.href = window.location.href;
							// #endif
							
						} else if (res.cancel) {
							console.log('关闭');
						}
					}
				});
			},
			openTips(){
				this.$refs['tips'].open()
			},
			closeips(){
				this.$refs.tips.close()
			},
			goAvatar() {
				uni.navigateTo({
					// 保留当前页面，跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
					url: `/packageMy/pages/my/editAvatar/editAvatar`
				})
			}
		}
	}
</script>

<style lang='scss'>
.nav {
	width: 750rpx;
	height: 146rpx;
	background: var(--primary);
	position: fixed;
	top: var(--window-top);
	left: 0;
	z-index: 20;
}

  .top {
    height: 224rpx;
    padding: 110rpx 40rpx 0;
    width: 670rpx;
    /* background: $uni-primary; */
	background: var(--primary);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user {
	  display: flex;
	  align-items: center;
	  .avatar{
		  width: 150rpx;
		  height: 150rpx;
		  border-radius: 100rpx;
	  }
      color: $uni-text-color-inverse;

      .bigText {
        font-size: 54rpx;
      }
	  .avatatText{
	  	margin-left: 50rpx;
	  }
      .smallText {
        font-size: 30rpx;
		margin-left: 20rpx;
      }
    }
	.info{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		.pan{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.pic {
			  width: 134rpx;
			  height: 134rpx;
			  border-radius: 50%;
			}
			.name{
				margin-left:20rpx;
				display: flex;
				flex-direction: column;
				.phone{
					margin-top: 20rpx;
				}
			}
		}
	}
  }

  .grid {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 214rpx;
    background: $uni-bg-color;
  }

  .assistant {
    .title {
      width: 670rpx;
      display: flex;
      margin: auto;
      justify-content: space-between;
      align-items: center;

      view {
        font-size: 40rpx;
        font-weight: bold;
      }

      text {
        color: $uni-text-color-grey;
        font-size: 30rpx;
      }
    }

    .items {
      width: 670rpx;
      margin: auto;
      margin-top: 40rpx;
      display: flex;
      justify-content: space-between;

      .item {
        width: 264rpx;
        padding: 0 30rpx;
        height: 140rpx;
        box-shadow: 2rpx 2rpx 30rpx 1rpx #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10rpx;

        .bigText {
          font-size: 40rpx;
          font-weight: bold;
        }
		
        .smallText {
          font-size: 24rpx;
          color: $uni-text-color-grey;
        }

        .right {
          width: 78rpx;
          height: 78rpx;
          background: #81AFE6;
          border-radius: 24rpx;
          line-height: 78rpx;
          text-align: center;
          color: $uni-text-color-inverse;

          .iconfont {
            font-size: 50rpx;
          }
        }

        .bgCD95FE {
          background: #CD95FE;
        }
      }
    }
  }

  .list {
    margin-top: 40rpx;
    .item {
      .item-inner {
        width: 670rpx;
        height: 108rpx;
        line-height: 108rpx;
        display: flex;
        margin: auto;
        justify-content: space-between;

        text {
          margin-left: 30rpx;
          font-size: 34rpx;
          color: $uni-text-color;
        }

        .iconfont {
          font-size: 40rpx;
          color: $uni-text-color;
        }

        .icon-right {
          color: $uni-text-color-grey;
        }
      }
    }

    .active {
      background: #F7F7F7;
    }

    .line {
      width: 670rpx;
      height: 1rpx;
      margin: 24rpx auto;
      background: $uni-bg-color-grey;
    }
  }
  .text-center{
	  margin-top: 50rpx;
  }
  .footer {
    margin-top: 108rpx;
    padding-bottom: 64rpx;
    z-index: 19;

    .item {
      text-align: center;
      color: $uni-text-color-grey;
      font-size: 26rpx;
      margin-bottom: 14rpx;
    }
  }

  .showMask {
    overflow: hidden;
    height: 100vh;
  }
  .connect {
    width: 492rpx;
    height: 84rpx;
	margin: 0 auto;
    /* background: $uni-primary; */
	background: var(--primary);
    border-radius: 20rpx;
    color: $uni-text-color-inverse;
    line-height: 84rpx;
    text-align: center;
  }
  .mask {
    position: absolute;
    background: rgba(0, 0, 0, .6);
    display: flex;
    width: 750rpx;
    height: calc(100% - 146rpx);
    top: 146rpx;
    left: 0;

    .inner {
      width: 486rpx;
      height: 364rpx;
      background: $uni-bg-color;
      margin: auto;
      border-radius: 8rpx;
      padding: 0 38rpx;

      .title {
        font-size: 40rpx;
        text-align: center;
        height: 133rpx;
        line-height: 134rpx;
      }

      .login {
        height: 84rpx;
        line-height: 84rpx;
        text-align: center;
        background: $uni-color-primary;
        color: #fff;
        border-radius: 8rpx;
      }

      .tip {
        margin-top: 40rpx;
        color: $uni-text-color-grey;
        font-size: 26rpx;

        text {
          color: $uni-color-primary;
        }
      }
    }
  }
  .ductionContent{
  	width:700upx;
  	height:auto;
  	background-color: #fff;
  	position: fixed;
  	left:50%;
  	top:48%;
  	transform: translate(-50%,-50%);
  	border-radius: 30upx;
  	.content{
  		.title{
  			font-size: 35upx;
  			line-height: 100upx;
  			text-align: center;
  			position: relative;
  			.tips{
  				display: flex;
  				align-items: center;
  				position: absolute;
  				right:0;
  				top:0;
  				width:200upx;
  				height:100upx;
  				font-size: 26upx;
  				color:#3498F5;
  				.img{
  					width: 24upx;
  					height:24upx;
  				}
  			}
  		}
  		.tipsContent{
  			font-size: 30upx;
  			line-height: 50upx;
  			.wrap{
  				display: flex;
  				align-items: center;
				justify-content: space-between;
  				height: 100upx;
  				padding:0 55upx;
  				position: relative;
  				&::after{
  					content: '';
  					width:100%;
  					height:1upx;
  					position: absolute;
  					top:0;
  					left:0;
  					border-top: 1upx solid #EBEBEB;
  					transform: scaleY(.8);
  				}
				.info{
					display: flex;
					align-items: center;
					justify-content: space-between;
					
				}
  				.img{
  					width:50upx;
  					height:50upx;
  				}
  				.name{
  					font-size: 26upx;
  					margin-left: 20upx;
  				}
  				.btn{
  					width:140upx;
  					height: 52upx;
  					font-size: 24upx;
  					line-height: 53upx;
  					/* background-color: #02C778; */
					background-color: var(--primary);
  					border-radius: 26upx;
  					margin-right: 0;
  				}
  			}
  			.mt10{
  				margin-top:10upx;
  			}
  		}
  		.pointBtn{
  			font-size: 36upx;
  			font-weight: bold;
  			line-height: 100upx;
  			/* margin-top:30upx; */
  			text-align: center;
  			position: relative;
  			&::after{
  				content: '';
  				width:100%;
  				height:1upx;
  				position: absolute;
  				top:0;
  				left:0;
  				border-top: 1upx solid #EBEBEB;
  				transform: scaleY(.8);
  			}
  		}
  		.text{
  			display: flex;
  			align-items: center;
  			position: relative;
  			padding:0 40upx;
  		}
  		.next{
  			padding:0 40upx;
  		}
  	}
  }
</style>
